<template>
  <div
    style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center"
  >
    <el-tag
      :type="props.type"
      :closable="props.closable"
      :disable-transitions="props.disableTransitions"
      :hit="props.hit"
      :color="props.color"
      :size="props.size"
      :effect="props.effect"
      :round="props.round"
      @close="handleClose"
      @click="handleClick"
    >
      {{ props.text }}
    </el-tag>
  </div>
</template>

<script setup lang="ts">
import { ElTag } from 'element-plus';

const props = defineProps({
  text: {
    type: String,
    default: '标签'
  },
  type: {
    type: String as () => 'primary' | 'success' | 'info' | 'warning' | 'danger',
    default: 'primary'
  },
  closable: {
    type: Boolean,
    default: false
  },
  disableTransitions: {
    type: Boolean,
    default: false
  },
  hit: {
    type: Boolean,
    default: false
  },
  color: {
    type: String,
    default: ''
  },
  size: {
    type: String as () => 'large' | 'default' | 'small',
    default: 'default'
  },
  effect: {
    type: String as () => 'dark' | 'light' | 'plain',
    default: 'light'
  },
  round: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['close', 'click']);

const handleClose = () => {
  emit('close');
  console.log('Tag closed');
};

const handleClick = (event: MouseEvent) => {
  emit('click', event);
  console.log('Tag clicked:', event);
};
</script>
